<template>
  <div class="shopBag">
    <van-nav-bar
      title="购物袋"
      :right-text="rightText"
      :fixed="true"
      @click-right="onEdit"
    ></van-nav-bar>

    <div v-if="isLogin==true&&shopBagData.length > 0">
      <div class="content">

        <div class="content-item" v-for="item in shopBagData" :key="item.sid">
          <van-swipe-cell>
            <div class="item">
              <van-checkbox v-model="item.checked" @change="selectOne"></van-checkbox>
              <div class="item-left">
                <img
                  :src="item.small_img"
                  alt=""
                />
              </div>
              <div class="item-right">
                <div class="item-right-t">
                  <p class="name">{{item.name}}</p>
                  <p class="enname">{{item.rule}}</p>
                </div>
                <div class="item-right-b">
                  <span class="price">&yen;{{item.price}}</span>
                  <div class="item-right-b-r">
                    <van-stepper v-model="item.count" theme="round" button-size="22" @change="alterQuantity(item.sid,item.count)" disable-input />
                  </div>
                </div>
              </div>
            </div>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="Delete([item.sid])"
              />
            </template>
          </van-swipe-cell>
        </div>

      </div>
      <van-submit-bar
        v-if="!edit"
        class="van-submit-bar"
        :price="totalPrice"
        button-text="去结算"
        @submit="placeOrder"
      >
        <van-checkbox v-model="allChecked" @change="allSelect">全选</van-checkbox>
      </van-submit-bar>

      <van-submit-bar
        v-if="edit"
        class="van-submit-bar"
        :price="totalPrice"
        button-text="删除"
        @submit="deleteSelect"
      >
        <van-checkbox v-model="allChecked" @change="allSelect">全选</van-checkbox>
      </van-submit-bar>
    </div>

    <div v-if="isLogin==false">
      <van-empty description="您尚未登录，请先前往登录">
        <van-button round type="danger" class="bottom-button" color="#0022ab" @click="toLogin">去登录</van-button>
      </van-empty>
    </div>

    <div v-if="isLogin == true&&shopBagData.length <= 0">
      <van-empty image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="购物袋空空如也">
        <van-button round type="danger" class="bottom-button" color="#0022ab" @click="toMenu">去购物</van-button>
      </van-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShopBag",
  data() {
    return {
      shopBagData: [],
      edit:false,
      rightText: "编辑",
      isLogin: true,
      allChecked:false
    };
  },
  created(){
    this.getshopBagData()
  },
  computed:{
    totalPrice(){
      let totalPrice = 0
      this.shopBagData.forEach(item=>{
        if(item.checked){
          totalPrice += item.price * item.count
        }
      })
      return totalPrice * 100
    }
  },
  methods: {
    onSubmit() {},
    toLogin(){
      this.$router.push({name:'Login'})
    },
    getshopBagData(){
      this.axios({
        method:'get',
        url:'/findAllShopcart'
      }).then(result=>{

        if(result.data.code == 700){
          this.isLogin = false
          this.rightText = ''
        }else if(result.data.code == 5000){
          result.data.result.forEach(item=>{
            item.checked = false
          })
          this.shopBagData = result.data.result
          if(this.shopBagData.length == 0){
            this.rightText = ''
          }
        }
      })
    },
    onEdit(){
      this.edit = !this.edit
      this.rightText = this.edit ? '取消' : '编辑'
    },
    selectOne(){
      for(let i = 0;i<this.shopBagData.length;i++){
        if(!this.shopBagData[i].checked){
          this.allChecked = false
          return
        }
      }
      this.allChecked = true
    },
    allSelect(){
      this.shopBagData.forEach(item=>{
        item.checked = this.allChecked
      })
    },
    alterQuantity(sid,count){
      this.axios({
        method:'post',
        url:'/modifyShopcartCount',
        data:{
          sid,
          count
        }
      }).then(result=>{

      }).catch(err=>{

      })
    },
    Delete(sids){
      this.axios({
        method:'post',
        url:'/deleteShopcart',
        data:{
          sids: JSON.stringify(sids)
        }
      }).then(result=>{

        if(result.data.code == 7000){
          sids.forEach(sid=>{
            for(let i=0;i<this.shopBagData.length;i++){
              if(sid==this.shopBagData[i].sid){
                this.shopBagData.splice(i,1)
                break;
              }
            }
          })
        }
      })
    },
    deleteSelect(){
      let sids = []
      this.shopBagData.forEach(item=>{
        if(item.checked){
          sids.push(item.sid)
        }
      })
      this.Delete(sids)
    },
    placeOrder(){
      let sids = []
      this.shopBagData.forEach(item=>{
        if(item.checked){
          sids.push(item.sid)
        }
      })
      if(sids.length == 0){
        this.$toast('您还没有选择商品哦！')
        return
      }
      this.$router.push({name:'PlaceOrder',query:{sids:sids.join('-')}})
    },
    toMenu(){
      this.$router.push({name:'Menu'})
    }
  },
};
</script>

<style lang="less" scoped>
.shopBag{
  padding-top: 76px;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  /deep/.van-nav-bar__text{
    color: #fff;
  }
}
.content {
  padding: 10px 10px 100px 10px;
  .content-item {
    .item {
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      display: flex;
      margin-bottom: 10px;
      padding: 10px;
      .item-left {
        margin: 0 10px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
      }
      .item-right {
        width: calc(100% - 120px);
        .item-right-t {
          margin-bottom: 25px;
          p {
            width: 160px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .name {
            font-size: 15px;
            color: #555;
          }
          .enname {
            color: #999;
          }
        }
        .item-right-b {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            font-size: 16px;
            font-weight: 600;
            color: #0022ab;
          }
          .item-right-b-r {
            display: flex;
            align-items: center;
            .reduce,
            .plus {
              width: 22px;
              height: 22px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            }
            .reduce {
              border: 1px solid #0022ab;
              color: #0022ab;
            }
            .plus {
              background-color: #0022ab;
              color: #fff;
            }
            .quantity {
              font-size: 16px;
              margin: 0 10px;
            }
          }
        }
      }
    }
    .delete-button {
      height: 100%;
    }
  }
}
.van-submit-bar {
  margin-bottom: 49px;
}
</style>